<!-- home -->
<template>
  <div class="container">

    <van-nav-bar
      title="工作计划"
      class="navclass"
      left-arrow
      left-text="返回"
      @click-left="doback"
    />

    <van-cell title="填报人：" v-model="ywyname" />

    <van-cell title="选择日期：" required v-model="date" @click="onDisplay" is-link />

    <van-cell  title="选择工作类型：" required title-class="titleclass"   v-model="typename" center is-link @click="showType" />

    <van-field
      v-model="szdz"
      label="目前所在地："
      required
      label-width="25%"
      placeholder="请输入目前所在地"
    />

    <van-calendar v-model="dateshow" @close="onClose" @confirm="onConfirm"  :show-confirm="false"  :min-date="minDate" :default-date="currentDate" />

    <van-field
      v-model="content"
      label="工作计划："
      placeholder="请输入工作计划"
      type="textarea"
      required
      label-width="25%"
    />

    <div  class="btn" >
      <van-button type="info" size="large" round @click="doSubmit" >提交</van-button>
    </div>

    <!-- <van-action-sheet v-model="show" :actions="actions" @select="onSelectfblx" />

     <van-action-sheet v-model="dklxshow" :actions="dkactions" @select="onSelectDklx" />-->

    <van-action-sheet v-model="show" :actions="actions" @select="onSelectType" />

  </div>
</template>

<script>

import { Dialog, Toast, Grid, GridItem, Calendar, Cell } from 'vant'

import { queryUserInfo, addJobplan, updateJobplan, listJobplan } from '../../api/api'

export default {
  name: 'JobPlan',
  data() {
    return {
      pageNum: 1,
      pageSize: 10,
      date: '',
      dateshow: false,
      actions: [{ id: '1', name: '找客户' }, { id: '2', name: '拜访客户' }, { id: '3', name: '培训客户' }],
      minDate: new Date(2021, 1, 1),
      ywyname: '',
      bz: '',
      currentDate: new Date(),
      userid: '',
      show: false,
      typename: '请选择',
      type: '',
      content: '',
      planid: '',
      szdz: ''
    }
  },

  created() {
    this.queryUserInfo()
    this.ywyname = this.$store.getters.userName
    console.log('已填报')
    var day3 = new Date()
    day3.setTime(day3.getTime() + 24 * 60 * 60 * 1000)
    var s3 = day3.getFullYear() + '-' + (day3.getMonth() + 1) + '-' + day3.getDate()
    this.currentDate = day3
    this.date = s3
  },
  mounted() {

  },

  methods: {

    queryJobplan() {
      const param = { ssrq: this.date, userid: this.userid, ywyname: this.ywyname }
      const that = this
      listJobplan(param).then(response => {
        if (response.code === 200) {
          console.log(response)
          const list = response.rows
          const actions = that.actions
          if (list && list.length > 0) {
            that.content = list[0].content
            that.type = list[0].type
            that.szdz = list[0].szdz
            for (var i = 0; i < actions.length; i++) {
              if (actions[i].id == list[0].type) {
                that.typename = actions[i].name
              }
            }
            that.planid = list[0].planid
          } else {
            that.content = ''
            that.type = ''
            that.szdz = ''
            that.typename = '请选择'
            that.planid = ''
          }
        } else {
          Toast.fail(response.msg)
        }
      })
    },

    queryUserInfo() {
      const param = {}
      queryUserInfo(param).then(response => {
        if (response.code === 200) {
          console.log(response)
          this.ywyname = response.data.name
          this.userid = response.data.userid
          this.queryJobplan()
        } else {
          Toast.fail(response.msg)
        }
      })
    },

    onDisplay() {
      this.dateshow = true
    },

    onClose() {
      this.show = false
    },

    onConfirm(event) {
      this.dateshow = false
      this.date = this.formatDate(event)
      this.queryJobplan()
    },

    formatDate(date) {
      const date1 = new Date(date)
      return `${date1.getFullYear()}-${date1.getMonth() + 1}-${date1.getDate()}`
    },

    showType() {
      this.show = true
    },

    onSelectType(item) {
      this.type = item.id
      this.typename = item.name
      this.show = false
    },

    doSubmit() {
      if (!this.date) {
        Toast.fail('请选择日期')
        return
      }

      if (!this.type) {
        Toast.fail('请选择工作类型')
        return
      }

      if (!this.content) {
        Toast.fail('请填写计划内容')
        return
      }

      if (!this.szdz) {
        Toast.fail('请填写目前所在地址')
        return
      }

      const planid = this.planid

      if (planid) {
        const param = { ssrq: this.date, content: this.content, userid: this.userid, planid: this.planid, type: this.type, ywyname: this.ywyname, szdz: this.szdz }
        updateJobplan(param).then(response => {
          if (response.code === 200) {
            Dialog.alert({
              title: '',
              message: '修改成功'
            }).then(() => {
              // on close
              this.$router.go(-1) // 返回上一层
            })
          } else {
            Toast.fail(response.msg)
          }
        })
      } else {
        const param = { ssrq: this.date, content: this.content, userid: this.userid, planid: this.planid, type: this.type, ywyname: this.ywyname, szdz: this.szdz }
        addJobplan(param).then(response => {
          if (response.code === 200) {
            Dialog.alert({
              title: '',
              message: '提交成功'
            }).then(() => {
              // on close
              this.$router.go(-1) // 返回上一层
            })
          } else {
            Toast.fail(response.msg)
          }
        })
      }
    },

    doback() {
      this.$router.go(-1) // 返回上一层
    }

  }
}
</script>
<style lang="scss" scoped>

.container{
  width: 100%;
  height: calc(100vh);
  background-color: white;
}

.navclass{
  background-color:#f8f8f8;
}

.btn{
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 30px;
  background-color: white;
  padding-bottom: 150px;
}

</style>
